<template>
  <div>
     <el-row>
       <el-col>
          <el-button type="text" @click="isEdit = true" class='pull-right'>
				  		<i class="el-icon-edit"></i><span>编辑</span>
				  </el-button>
       </el-col>
     </el-row>
     <el-row class='m-t-20 m-b-30'>
       <el-col :span='5' class='boundary'>
          <div class="photo-box pull-right">
			        	<img src="~__assets/images/head.jpg" />
			    </div>
       </el-col>
        <el-col :span='17' class='m-l-30'>
          <el-form :model="sysUserInfo"  ref="sysUserInfo" label-width="90px"  class= 'form'>
             <el-row >
	              <el-col :span="12" >
                  <el-form-item label="用户名称：">{{sysUserInfo.name}}</el-form-item>
                  <el-form-item label="移动电话："  prop="phoneNumber"  v-if="!isEdit">
                      <span>{{sysUserInfo.phoneNumber}}</span>
                  </el-form-item>
                  <el-form-item label="移动电话："  prop="phoneNumber" v-if="isEdit" >
                      <el-input  v-model="sysUserInfo.phoneNumber" placeholder="请输入手机号"  style="width: 200px;height: 38px;"></el-input>
                      <div v-if="mobileErrorFlag" class="error-color-red">{{this.mobileTips}}</div>
                  </el-form-item>
                  <el-form-item label="登录账号：">{{sysUserInfo.accout}}</el-form-item>
                </el-col >
                <el-col :span="12" >
                  <el-form-item label="所属角色：">{{sysUserInfo.roleName}}</el-form-item>
                  <el-form-item label="电子邮箱：" prop="email" v-if="!isEdit">
                      <span >{{sysUserInfo.email}}</span>
                  </el-form-item>
                  <el-form-item label="电子邮箱：" prop="email" v-if="isEdit">
                      <el-input  v-model="sysUserInfo.email" placeholder="请输入邮箱"  style="width: 200px;height: 38px;"></el-input>
                      <div v-if="emailErrorFlag" class="error-color-red">{{this.emailTips}}</div>
                  </el-form-item>
                  <el-form-item label="状态：">{{sysUserInfo.activateStatus | getDicNameById('userState')}}</el-form-item>
                </el-col >
					  </el-row>
             <el-row>
                 <el-col >
						     	 <el-form-item label="备注：" class='remark'>{{sysUserInfo.remark}}</el-form-item>
                 </el-col >
					  </el-row>
             <el-row>
                <el-col >
                  <div class="align-center m-t-20" v-if="isEdit">
                      <el-button @click="validationField" class="ca-search"  type="primary" round>确定</el-button>
                      <el-button @click="cancel" class="ca-search"  type="primary" round>取消</el-button>
                  </div>
                </el-col>
				</el-row>
          </el-form>
       </el-col>
     </el-row>
     <el-row>
       <el-col>
           <el-button class="pull-right"  type="primary" @click="close()" round>关闭</el-button>
       </el-col>
     </el-row>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import UserService from '../../service/system-config/user';
import { SysUserVO, SysUser } from '../../api/Interface';
// import { SysMenuTree } from '../../api/Interface';

interface SysUserInfo extends SysUser {
    repeatPaw: string;        // 确认密码 ,
    roleId: string;           // 角色Id ,
    roleName: string;         // 角色名称 ,
}

@Component({
  components: {}
})
export default class Menu extends Vue {
  // 初始化数据
  public isEdit: boolean = false; // 是否显示编辑
  public id: string = this.$store.state.user.uid; // 当前登陆者的id
  public sysUserInfo: SysUserInfo = {} as SysUserInfo; // activateStatus激活状态1-激活0未激活
  public sysUserInfoParams: SysUserVO = { } as SysUserVO; // 要传的参数
  public phoneNumber: string = '';
  public email: string = '';
  public mobileErrorFlag: boolean = false;
  public emailErrorFlag: boolean = false;
  public mobileTips: string = '';
  public emailTips: string = '';
  public $refs: {
    sysUserInfo: HTMLFormElement,
  };
  @Watch('sysUserInfo.phoneNumber')
  public vadidatePhoneNumber(val: string, oldValue: string) {
     if ( val === '' || val === null ) {
          this.mobileTips = '';
          this.mobileErrorFlag = false;
      } else if  (!(/^1(3|4|5|7|8)\d{9}$/.test(val))) {
          this.mobileTips = '手机号码有误';
          this.mobileErrorFlag = true;
      } else {
          this.mobileTips = '';
          this.mobileErrorFlag = false;
      }
  }
    @Watch('sysUserInfo.email')
    public vadidateEmail(val: string, oldValue: string) {
        if ( val === '' || val === null ) {
            this.emailTips = '';
            this.emailErrorFlag = false;
        } else if  (!( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(val))) {
            this.emailTips = '邮箱地址有误';
            this.emailErrorFlag = true;
        } else {
            this.emailTips = '';
            this.emailErrorFlag = false;
        }
    }
  // 关闭按钮
  public close() {
      // console.log(this.$parent.$refs.tabMenu,localStorage.getItem('TAB_MENU_CURR_INDEX'),"关闭")
      // this.$nextTick(() => {
      //           this.$parent.$refs.tabMenu.removeTab(localStorage.getItem('TAB_MENU_CURR_INDEX'))
      // });  
      // this.$parent.$refs.tabMenu.removeTab(localStorage.getItem('TAB_MENU_CURR_INDEX'))
  }
  public cancel() {
    this.$refs.sysUserInfo.resetFields(); // 防止修改后取消
    this.getDetail(); // 防止修改后取消
    this.isEdit = false;
  }
  public mounted() {
    this.getDetail();
  }

  //获取用户详情
  public async getDetail() {
      // console.log(this.id,"this.id");
      const res = await UserService.getSysUserById(this.id);
      this.sysUserInfoParams = res;

      this.sysUserInfo = JSON.parse(JSON.stringify(this.sysUserInfoParams.sysUser));
     
      this.sysUserInfo.roleId = this.sysUserInfoParams.roleId ; 
      this.sysUserInfo.roleName = this.sysUserInfoParams.roleName;
  }
   // 验证字段
  public validationField() {
     if (this.mobileErrorFlag) {
         this.$message({
              message: '请输入正确的移动号码！',
              type: 'warning',
              center: true
          });
          return;
     } else if (this.emailErrorFlag) {
           this.$message({
              message: '请输入正确的邮箱！',
              type: 'warning',
              center: true
          });
           return;
     } else {
         this.saveUser();
     }

  }
  // 编辑
  public async saveUser() {
      // 数据处理
      // 给传递的参数 赋值
  
      this.sysUserInfoParams.sysUser.phoneNumber = this.sysUserInfo.phoneNumber;
      this.sysUserInfoParams.sysUser.email = this.sysUserInfo.email;  

      this.sysUserInfoParams.sysUser.password = '';
      this.sysUserInfoParams.repeatPaw = '';

      // 可能会修改的 
      // modiferId
      // modifyTime

      const res = await UserService.sysUserUpdate(this.sysUserInfoParams);
      if (res.resCode === '0') {
          this.$message({
              message: '修改成功!',
              type: 'success',
              center: true
          });
          this.isEdit = false;
      }     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.photo-box{
     width: 109px;
     height: 109px;
     img {
       width: 109px;
       height: 109px;
       border-radius: 50%;
     }
}
.line{
   width: 1px;
   height:109px;
   background: #d8e6f1;
}
.boundary{
  padding-right: 40px;
  // background: green;
  // height:200px;
  border-right: 1px solid #d8e6f1;
}
.remark{
  word-wrap:break-word;
}
.form {
  .el-form-item{
    margin-bottom: 0px;
  }
}
.error-color-red{
  	color: red;
}
</style>
